<template>
	<view style="background-color: #F7F7F9;">
		<view class="" v-if="isshow">
			<view class="flex  a-c q_y "
				style="position: fixed;top: 20px;width: 100px;height: 30px;z-index: 88;border: solid 2rpx #fff;left: 10px;">
				<view class="flex a-c" @click="on_fanhui">
					<text class="bicon cff ml1">&#xe679;</text>
					<text class="ml1 cff">返回</text>
				</view>
				<text @click="on_home" class="bicon f45 ml2 cff ">&#xe7d4;</text>
			</view>
			<!-- #ifdef H5 -->
			<image :src="find.shop_img|getImg" style="width: 750rpx;height: 100vh;"></image>
			<!-- <canvas :style="{ width: `${width}px`, height: `${height}px`}" canvas-id="firstCanvas"
				id="firstCanvas"></canvas> -->
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<image :src="find.shop_img|getImg" style="width: 750rpx;height: 100vh;"></image>
			<!-- #endif -->
			<view class=" flex j-c ">
				<view class="dibu by1">
					<view class="  flex ">
						<view class="flex j-s p10" style="width: 100%;">
							<view class="t_c" @click="on_fanhui" style="width: 180rpx;">
								<text class="bicon f40 cff">&#xe679;</text>
								<view class="cff f28 f800">返回</view>
							</view>
							<view class="t_c" @click="on_sc" style="width: 180rpx;">
								<text class="bicon f40 cff">&#xe64c;</text>
								<view class="cff f28 f800">{{find.is_collection==0? ' 收藏':'取消收藏' }}</view>
							</view>
							<view class="t_c" @click="on_xiazai" style="width: 180rpx;">
								<icon-download size="40" color="#fff"></icon-download>
								<view class="cff f28 f800">下载</view>
							</view>

						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup_haibao" type="center">
			<haibao class="" :fx_haobao="fx_haobao" :width="width" :height="height">
			</haibao>
		</uni-popup>
		<view class="flex j-c a-c" style="width: 750rpx;height: 100vh;" v-if="!isshow">
			<view class="">
				<image src="../../static/icon/lo.gif" style="width: 60rpx;height: 60rpx;"></image>
			</view>
		</view>
	</view>
</template>


<script>
	import haibao from './haibao.vue';
	export default {
		components: {
			haibao
		},
		data() {
			return {
				width: uni.getSystemInfoSync().windowWidth,
				height: uni.getSystemInfoSync().windowHeight + 50,
				find: {},
				tabIndex: 0,
				//二维码相关参数
				qrPath: '',
				text: '',
				size: 200,
				quality: 'L',
				colorDark: '#000000',
				colorLight: '#ffffff',
				fx_haobao: '',
				isshow: false

			}
		},
		onLoad(options) {
			var pages = getCurrentPages()
			let currentRoute = pages[pages.length - 1].route;
			this.api_path = currentRoute.match(/pages\/(\S*)\//)[1];
			var that = this;
			if (options && options.id) {
				this.id = parseInt(options.id);
				if (this.id) {
					that.init();

				}
			}


		},

		methods: {

			on_fanhui() {
				uni.navigateBack()
			},
			on_home() {

				uni.switchTab({
					url: '/pages/banmichaoqiangbizhi/index'
				})
			},

			init() {
				let that = this;
				let requestParams = {
					id: this.id
				};
				this.Http.post('/plugin.php/banmichaoqiangbizhi/api/index/ViewAjax', requestParams).then(ret => {

					if (ret.status == 200) {
						this.find = ret.data.find;
						// #ifdef H5
						this.text = window.location.href
						// #endif
						this.huabu();
						setTimeout(function() {
							that.isshow = true;
						}, 500);


					} else {
						uni.showModal({
							title: '提示',
							content: ret.msg,
							showCancel: false,
							confirmText: '后退',
							success: function(res) {
								if (res.confirm) {
									uni.navigateBack()
								}
							}
						});
					}
				})
			},
			huabu() {
				var that = this;
				var context = uni.createCanvasContext('firstCanvas')
				var shop_img =  this.getImg1(that.find.shop_img);
			 
 
				context.drawImage(shop_img, 0, 0, that.width, that.height)
				context.draw()
			},
			on_sc() {
				if (!uni.getStorageSync('token')) {
					uni.navigateTo({
						url: '/pages/banmi/user_login'

					})
					return
				}

				var that = this;
				let requestParams = {
					shop_id: this.id,
				};
				this.Http.post('/plugin.php/banmichaoqiangbizhi/api/index/collection_add', requestParams).then(
					ret => {
						if (ret.status == 200) {
							that.find.is_collection = 1;
						} else if (ret.status == 100) {
							that.find.is_collection = 0;
						}
					})
			},

			getImg1(path) {
				if (path.indexOf("http") != -1) {
					return path;
				}
				path = uni.getStorageSync('img_url') + path
				return path
			},
			on_xiazai() {
				var that = this;
				if (!uni.getStorageSync('token')) {
					uni.navigateTo({
						url: '/pages/banmi/user_login'

					})
					return
				}
			 
				var set_find = this.get_plugin_set
				var jifen = set_find.download_num;
				uni.showToast({
					title: '下载需' + jifen + '积分',
					icon: 'none'
				})
				let requestParams = {
					shop_id: this.id,
				};
				 
				this.Http.post('/plugin.php/banmichaoqiangbizhi/api/Sign/set_download', requestParams).then(ret => {
					uni.showToast({
						title: ret.msg,
						icon: 'none'
					})
					if (ret.status == 200) {
						//生成图片
						that.fx_haobao = that.getImg1(that.find.shop_img);
						uni.hideLoading()
						that.$refs.popup_haibao.open()
					}

				})



			},
			ontab(index) {
				this.tabIndex = index;
			},

			daohang() {


			},

		},
		onNavigationBarButtonTap(e) {

		}
	}
</script>

<style scoped>
	.fk_img {
		margin-right: -10rpx;
	}

	.dibu {
		position: fixed;
		text-align: center;
		align-items: center;
		bottom: 30px;
		background-color: rgba(0, 0, 0, 0.8);

		width: 90%;

	}

	.isxz {
		border-bottom: solid 8rpx #FFD821;
		height: 45rpx;
		font-weight: 800;
		padding-bottom: 50rpx;
	}

	.iswxz {
		padding-bottom: 50rpx;
		border-bottom: solid 8rpx #fff;
		height: 45rpx;
		color: #767676;
		font-weight: 800;
	}
</style>